import React, { useMemo, useState } from 'react'
import { Steps, Step, Button } from '@nutui/nutui-react'
import './steer.css'
import '@nutui/nutui-react/dist/style.css'
import { useNavigate } from 'react-router-dom'

export default function Steer() {
    const [val, setVal] = useState(1)
    const handleStep = () => {
        const newVal = (val % 3) + 1
        setVal(newVal)
        console.log(newVal)
    }
    const nav = useNavigate()
    let aa = useMemo(() => {
        if (val === 1) {
            return <img src="../imgs/y1.png" alt="" style={{width:'422px',height:'620px',marginLeft:"-5px"}}/>
            // return 1
        } else if (val === 2) {
            // return 2
            return <img src="../imgs/y2.png" alt=""  style={{width:'422px',height:'620px'}}/>
        } else {
            // return 3
            return <img src="../imgs/y3.png" alt=""  style={{width:'422px',height:'620px'}}/>
        }
    })
    return (
        <div className='steer'>
            <span className='btn' onClick={()=>{nav('/shou')}}>跳过</span>
            <div className='imgs'>
                {aa}
            </div>
            <div style={{ marginTop: '10px', textAlign: 'center' }}>
                {val === 3 ? (
                    <Button type="" onClick={() => { nav('/shou') }}>完成</Button>
                ) : (
                    <Button type="" onClick={handleStep}>下一步</Button>
                )}
            </div>

            {/* <button onClick={()=>{nav('/shou')}}>跳转到首页</button> */}
        </div>
    )
}
